<template>
  <div class="login_page">
    <div class="login_box">
      <div class="center_box">
        <!-- 登录&注册-->
        <div :class="{login_form: true, rotate: tab === 2}">
          <div :class="{tabs: true, r180: reverse === 2}">
            <div class="fl tab" @click="changeTab(1)">
              <span :class="{on: tab === 1}">登录</span>
            </div>
            <div class="fl tab" @click="changeTab(2)">
              <span :class="{on: tab === 2}">注册</span>
            </div>
          </div>

          <!-- 登录 -->
          <div class="form_body" v-if="reverse === 1">
            <!-- submit.prevent 阻止默认表单事件提交，采用loginSubmit -->
            <form @submit.prevent="loginSubmit">
              <input type="text" v-model="loginData.username" placeholder="请输入用户名" autocomplete="off">
              <input type="password" v-model="loginData.password" placeholder="请输入密码" autocomplete="off">
              <div class="error_msg">{{ loginMessage }}</div>
              <input type="submit" v-if="subState" disabled="disabled" value="登录中···" class="btn"/>
              <input type="submit" v-else value="登录" @submit="loginSubmit" class="btn"/>
            </form>
          </div>

          <!-- 注册 -->
          <div class="form_body r180" v-if="reverse === 2">
            <form @submit.prevent="regSubmit">
              <input type="text" v-model="registerData.username" placeholder="请输入用户名" autocomplete="on">
              <input type="password" v-model="registerData.password" placeholder="6-30位密码，可用数字/字母/符号组合"
                     autocomplete="on">
              <input type="password" v-model="registerData.repPassword" placeholder="确认密码">
              <div class="error_msg">{{ regMessage }}</div>
              <div class="agree">
                <input type="checkbox" id="tonyi" v-model="registerData.check">
                <label for="tonyi">我已经阅读并同意</label><a href="javascript:void(0);" @click="xieyi = true">《用户协议》</a>
              </div>
              <input type="submit" v-if="subState" disabled="disabled" value="提交中···" class="btn">
              <input type="submit" v-else value="注册" class="btn">
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- 用户协议 -->
    <div class="xieyi" v-if="xieyi" @click.self="xieyi = false">
      <div class="xieyi_content">
        <div class="xieyi_title">请认真阅读用户协议</div>
        <div class="xieyi_body" v-if="xieyiContent" v-html="xieyiContent">
        </div>
        <input type="button" class="xieyi_btn" value="确定" @click="xieyi = false">
      </div>
    </div>
  </div>
</template>
<script>
import {isvalidUsername} from '@/utils/validate'

import {getXieyi, getUserByUsername, register} from '@/api/auth'

export default {
  name: "login",
  data() {
    return {
      tab: 1, // 高亮当前标签名
      reverse: 1, // 旋转 1 登录，2 注册
      loginMessage: '', //登录错误提示信息
      regMessage: '', //注册错误提示信息
      subState: false, //提交状态
      xieyi: false, // 显示隐藏协议内容
      xieyiContent: null, // 协议内容
      redirectURL: '//www.mengxuegu.com', // 登录成功后重写向地址
      loginData: { // 登录表单数据
        username: '',
        password: ''
      },
      registerData: { // 注册表单数据
        username: '',
        password: '',
        repPassword: '',
        check: false
      },
    }
  },

  async created() {
    if (this.$route.query.redirectURL) {
      // 重定向
      this.redirectURL = this.$route.query.redirectURL
    }
    // 获取协议内容
    this.xieyiContent = await getXieyi()
  },

  methods: {

    // 切换标签
    changeTab(int) {
      this.tab = int;
      let _that = this;
      setTimeout(() => {
        console.log(_that)
        this.reverse = int
      }, 200)
    },

    // 提交登录
    loginSubmit() {
      // 如果在登录中，不允许登录
      if (this.subState) {
        return false;
      }
      if (!isvalidUsername(this.loginData.username)) {
        this.loginMessage = '请输入正确用户名'
        return false
      }

      if (this.loginData.password.length < 6) {
        this.loginMessage = '请输入正确的用户名或密码';
        return false;
      }

      this.subState = true // 登录中

      this.$store.dispatch('UserLogin', this.loginData).then((response) => {
        const {code, message} = response

        if (code === 20000) {
          // 跳转回来源页面
          window.location.href = this.redirectURL
        } else {
          this.loginMessage = message
        }
        this.subState = false // 提交完
      }).catch(error => {
        console.log(error)
        this.subState = false // 提交完
        this.loginMessage = '系统繁忙，请稍后重试'
      })
    },

    // 提交注册
    async regSubmit() {
      // 如果在登录中，不允许登录
      if (this.subState) {
        return false;
      }

      if (!isvalidUsername(this.registerData.username)) {
        this.regMessage = '请输入4-30位用户名, 中文、数字、字母和下划线'
        return false
      }

      const {code, message, data} = await getUserByUsername(this.registerData.username)
      // 不为20000则后台校验用户名不合法
      if (code !== 20000) {
        this.regMessage = message
        return false
      }

      if (data) { // true 已被注册，false 未注册
        this.regMessage = '用户名已被注册，请重新输入用户名'
        return false
      }

      if (this.registerData.password.length < 6
          || this.registerData.password.length > 30) {
        this.regMessage = '请输入6-30位密码,区分大小写且不可有空格'
        return false
      }

      if (this.registerData.password !== this.registerData.repPassword) {
        this.regMessage = '两次输入密码不一致'
        return false
      }

      if (!this.registerData.check) {
        this.regMessage = '请阅读并同意用户协议'
        return false
      }

      this.subState = true // 提交中

      // 提交注册数据
      // register(this.registerData).then(response => {
      //   this.subState = false
      //   const {code, message} = response
      //   if (code === 20000) {
      //     // 注册成功，切换登录页
      //     this.changeTab(1)
      //   } else {
      //     this.regMessage = message
      //   }
      // }).catch(error => {
      //   console.log(error)
      //   this.subState = false
      //   this.regMessage = '系统繁忙，请稍后重试'
      // })
      this.regMessage = '因为政策等原因，暂时不开放注册和评论功能'

      setTimeout(()=>{
        this.regMessage = ''
        this.subState = false
      }, 3000)
    }

  },
}
</script>
<style scoped>
@import '../../assets/style/login.css';
</style>

